
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CSS Integration JSON Editor Example</title>
    
    <!-- Foundation CSS framework (Bootstrap and jQueryUI also supported) -->
    <link rel='stylesheet' href='//cdn.jsdelivr.net/foundation/5.0.2/css/foundation.min.css'>
    <!-- Font Awesome icons (Bootstrap, Foundation, and jQueryUI also supported) -->
    <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'>
    
    <script src="${root}js/jsoneditor.js"></script>
    
    <script>
    // Set the default CSS theme and icon library globally
    JSONEditor.defaults.theme = 'foundation5';
    JSONEditor.defaults.iconlib = 'fontawesome4';
    </script>
  </head>
  <body>
    <div class='row'>
      <div id='editor_holder' class='medium-12 columns'></div>
    </div>
    
    <script>
      // This is the starting value for the editor
      // We will use this to seed the initial editor 
      // and to provide a "Restore to Default" button.
      var starting_value = [
    		  {"第一集":[
    			  {"课程":"xxxx","类型":"录播"},
    			  {"课程":"xxx2","类型":"直播"}
    		  ]},
      		  {"第二章":[
      			{"课程":"xxxx","类型":"录播"},
  			  	{"课程":"xxx2","类型":"直播"}
      		  ]}
    		];
      
      // Initialize the editor
      var editor = new JSONEditor(document.getElementById('editor_holder'),{
        // Enable fetching schemas via ajax
        ajax: false,
        // The schema for the editor
        schema: starting_value,
        // Seed the form with a starting value
        startval: starting_value,
        disable_properties:true,
        form_name_root:"顶"
      });
      
    
      
      // Hook up the validation indicator to update its 
      // status whenever the editor changes
     
    </script>
  </body>
</html>
